<template>
	
<u-navbar placeholder  @leftClick="jumpPage('/pages/index/index')" title="提交信息"> </u-navbar>	
	

	<u--form labelPosition="left" :model="formState" :rules="rules" ref="loginform" class="form_state">
		

		
		<u-form-item borderBottom>
			<up-input v-model="formState.name" readonly placeholder="请输入收货人姓名" class="input_item">
				<template #prefix>
					<text class="leftPrefix" >收货人姓名</text>
				</template>
			</up-input>
		</u-form-item>
		
		<u-form-item borderBottom>
			<up-input v-model="formState.mobile" readonly placeholder="请输入手机号" class="input_item">
				<template #prefix>
					<text class="leftPrefix" >收货人电话</text>
				</template>
			</up-input>
		</u-form-item>
		
	
		
		<u-form-item  borderBottom>
			<up-input v-model="formState.address" readonly placeholder="请输入收货地址" class="input_item">
				<template #prefix>
					<text class="leftPrefix" >收货地址</text>
				</template>
			</up-input>
		</u-form-item>
		
		<u-form-item  borderBottom prop="nums">
			<up-input v-model="formState.nums" type="number"  placeholder="请输入货物件数" class="input_item">
				<template #prefix>
					<text class="leftPrefix">货物件数</text>
				</template>
			</up-input>
		</u-form-item>
		
		<u-form-item borderBottom>
			<up-input v-model="formState.weight" type="number" placeholder="请输入重量(单位kg)" class="input_item">
				<template #prefix>
					<text class="leftPrefix" >重量</text>
				</template>
			</up-input>
		</u-form-item>
		
		<u-form-item borderBottom>
			<up-input v-model="formState.total_amount" type="number" placeholder="请输入总运费" class="input_item">
				<template #prefix>
					<text class="leftPrefix" >总运费</text>
				</template>
			</up-input>
		</u-form-item>
		
		<u-form-item  borderBottom>
			<up-input v-model="formState.success_amount" type="number" placeholder="请输入总运费" class="input_item">
				<template #prefix>
					<text class="leftPrefix" >成功运费</text>
				</template>
			</up-input>
		</u-form-item>
		
		
		<view class="form_item">
			<view class="leftPrefix">付款方式</view>
			<u-radio-group v-model="formState.payment_way" >
				<u-radio shape="square" name="1" label="到付"></u-radio>
				<u-radio style="margin-left: 15px;" shape="square" name="2" label="现付"></u-radio>
			</u-radio-group>
			
		</view>

		<u-form-item borderBottom>
			<view @click="submitForm" class="submit_btn">提交</view>
		</u-form-item>

	</u--form>

</template>

<script setup>
	import { jumpPage } from '@/common/hooks.js'
	import { createOrderApi ,orderDetailApi , updateOrderApi} from '@/common/apis.js'
	import { reactive, ref, computed, onMounted } from 'vue';
	import { useStore } from 'vuex';
	import { onLoad } from "@dcloudio/uni-app";
	const loginform = ref()
	const store = reactive(useStore())
	const state = reactive({
	})
	const formState = reactive({
		nums: 1,
		weight: "",
		uid: "",
		total_amount: "",
		success_amount:"",
		payment_way:"1",
		mobile:"",
		name:"",
		address:"",
	})
	const rules = reactive({
		'nums': 
			{
				type: 'number',
				required: true,
				message: '请填写货物件数',
				trigger: ['blur', 'change']
			},
	})
	


	const submitForm = () => {
		loginform.value.validate().then(async () => {
			let reqdata = formState
			console.log(!reqdata.weight && !reqdata.success_amount &&!reqdata.total_amount);
			if (!reqdata.weight && !reqdata.success_amount &&!reqdata.total_amount) {
				return uni.showToast({title: '请填写 重量,总运费,成功运费 至少其中一项' ,icon: 'none',duration: 2000})
			}
			if ( state.order_id ) {
				reqdata.id = state.order_id
				const {data:res} =await updateOrderApi(reqdata)
				
				if (res.code ==200) {
					uni.showToast({
						title:'修改订单成功'
					})
				}
				
			}else {
				const {data:res} =await createOrderApi(reqdata)
				if (res.code ==200) {
					uni.showToast({
						title:'创建订单成功'
					})
				}
				
			}
			
	
			jumpPage(`/pages/order/orderDetail?id=${res.data.id}`)
		
		}).catch(errors => {
			console.log(errors);
		})
	}
	

	const getOrderInfo = async (id) =>{
		let reqdata = {
			params:{id}
		}
		const {data:res} =await  orderDetailApi(reqdata)
		if (res.code ==200) {
			formState.name= res.data.receiver_name
			formState.uid= res.data.receiver_uid
			formState.mobile= res.data.receiver_mobile
			formState.weight= res.data.weight
			formState.success_amount= res.data.success_amount
			formState.total_amount= res.data.total_amount
			formState.payment_way= res.data.payment_way.toString()
			formState.address= res.data.receiver_province_name + res.data.receiver_city_name + res.data.receiver_county_name + res.data.receiver_address
		}
	}


	onLoad((optios) => {
		formState.name= optios.name
		formState.uid= optios.uid
		formState.mobile= optios.mobile
		formState.address= optios.address
		if (optios.id) {
			state.order_id = optios.id
			getOrderInfo(optios.id)
		}
	})
</script>

<style lang='scss' scoped>

page {
	background: #F8F9FC;
}

	.form_state {
		padding: 0 20px;
	}

	.input_item {
		background: #fff;
		border: none;
		border-radius: 5px;
		height: 30px;
	}





	.submit_btn {
		background: $common-blue;
		color: #fff;
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		font-size: 16px;
		margin-top: 30px;
	}


	.leftPrefix {
		width: 80px;
		font-size: 14px;
		
	}
	.form_item {
		display: flex;
		background-color: #fff;
		height: 40px;
		align-items: center;
		padding-left: 10px;
		margin-top: 10px;
	}
	
	
	
</style>